<template>
  <div class="x-unit" @click.self="closeMask" :style="{height:`${deviceH}px`}">
    <div class="unit-ctx" :style="{'background-image':`url(${modelBg})`}" v-show="pepleishow">
      <div class="ctx-title">疫情防控管理</div>
      <div class="top_left">
        <div class="top_left_one" @click="showdetail();" style="cursor: pointer;">
          <img src="../../assets/images/yiqing_bed.png" alt />
          <div>
            <p>隔离人数</p>
            <p class="num">{{gelitotal}}人</p>
          </div>
        </div>
        <div class="top_left_two">
          <div class="item">
            <img src="../../assets/images/yiqing_icon.png" alt />
            <div>
              <p>
                流动人口
                <span>在</span>锡人数
              </p>
              <p class="num">{{ldzxtotal}}人</p>
            </div>
          </div>
          <div class="item">
            <img src="../../assets/images/yiqing_icon.png" alt />
            <div>
              <p>
                流动人口
                <span>返</span>锡人数
              </p>
              <p class="num">{{ldfxtotal}}人</p>
            </div>
          </div>
        </div>
        <div class="top_left_three">
          <div id="main" style="width: 270px;height: 185px;"></div>
        </div>
      </div>
      <div class="top_right">
        <div class="type-title">返锡人员户籍排名分布</div>
        <ul v-if="UnitTypeEchartsData.length" class="type-list">
          <li v-for="item in UnitTypeEchartsData" :key="item.name" class="type-list-rs">
            <div class="rs-name">
              <span class="name">{{item.name}}</span>
              <span class="number">{{item.value}}</span>
            </div>
            <div class="rs-process">
              <div class="process" :style="{width:`${(item.value/10000)*100}%`}"></div>
            </div>
          </li>
        </ul>
      </div>
      <div class="middle">
        <div id="main2" style="width: 790px;height: 295px;"></div>
      </div>
      <div class="bottom">
        <div id="main3" style="width: 790px;height: 300px;"></div>
      </div>
    </div>

    <!--详情页-->
    <div
      @click.self="closeMask"
      v-if="!pepleishow"
      class="x-house"
      :style="{ height: `${deviceH}px` }"
    >
      <div
        v-show="isShowCtx == '2'"
        class="house-ctx page2"
        style="padding-top:20px;"
        :style="{ 'background-image': `url(${modelBg1})` }"
      >
        <span @click="pepleishow=true" style="float:right" class="back">
          <img src="../../assets/images/icon/return.png" />
        </span>
        <div class="footer-unit" style="margin-top:20px">
          <div class="unit-header">
            <div style="color:#C9FBFE;font-size:30px;">{{clickTitle}}</div>
          </div>

          <div
            style="display:flex;flex-wrap:nowrap;align-items:center;width:calc(100% - 80px);height:36px;white-space:nowrap;padding:0 40px;margin-top:1rem;"
          >
            <el-date-picker
              v-model="obj.time"
              type="daterange"
              class="dateselect"
              value-format="yyyy-MM-dd"
              style="float: left;background: #06121d !important;"
            ></el-date-picker>
            <div class="header-item" style="margin-left:50px;">
              <input v-model="obj.peopleUserID" class="input" placeholder="身份证号" />
            </div>
            <div style="width:calc(100% - 528px);"></div>
            <div @click="searchEvent()" class="header-btn">搜索</div>
          </div>

          <div class="unit-list">
            <ul class="list-ul">
              <li class="list-li">
                <div class="item-no">序号</div>
                <div class="li-name">姓名</div>
                <div class="li-sex">性别</div>
                <div class="li-age">年龄</div>
                <div class="li-phone">身份证号</div>
                <div class="li-phone">联系电话</div>
                <div class="li-phone">操作</div>
              </li>
              <li
                @click="showPeopleDetail(index, item)"
                v-if="peoples.length >= 0"
                v-for="(item, index) in peoples"
                class="list-li"
              >
                <div class="item-no">{{ index + 1 + pageSize * (pageNum - 1) }}</div>
                <div class="li-name">{{ item.name }}</div>
                <div class="li-sex">{{ item.sex }}</div>
                <div class="li-age">{{ item.age }}</div>
                <div
                  :alt="item.idNum"
                  :title="item.idNum"
                  class="li-phone"
                >{{ new String().hideidCard(item.idNum) }}</div>
                <div :alt="item.phone" :title="item.phone" class="li-phone">{{ item.phone }}</div>
                <div class="li-phone button-color">查看</div>
              </li>
            </ul>
          </div>
          <div v-if="allpage > 0" class="table-footer">
            <x-page
            :currentPage="pageNum"
              @currentChange="currentChange"
              :page-size="5"
              :allpage="allpage"
              :total-num="false"
            />
          </div>
        </div>
      </div>
      <div
        v-if="isShowCtx == '3'"
        class="house-ctx page2"
        :style="{ 'background-image': `url(${modelBg1})` }"
        s
      >
        <div>
          <x-dangan :id="danganid" @changedangan="changedangan"></x-dangan>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { exportExcel } from "xlsx-oc";
import XPage from "@/components/xpage";
import XSelect from "@/components/xselect";
import XDangan from "@/components/xdanganmodel";
import { GetEpidemicInfo, getIsOlationsPage } from "@/api/peopleApi";
export default {
  name: "xnoclistmodel",
  props: {
    id: {
      type: String,
      default: ""
    },
    code: {
      type: String,
      default: ""
    },
    nocInfo: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  computed: {},
  data() {
    return {
      modelBg: require("@/assets/images/modelBg.png"),
      gelitotal: "",
      ldzxtotal: "",
      ldfxtotal: "",
      UnitTypeEchartsData: [],
      pepleishow: true,
      isShowCtx: 2,
      peoples: [],
      pageNum: 1,
      pageSize: 10,
      alltotal: 0,
      allpage: 0,
      modelBg1: require("@/assets/images/modelBg.png"),
      danganid: "",
      obj: {
        peopleName: "",
        peopleUserID: "",
        time: ""
      }
    };
  },
  beforeMount() {
    let h = document.documentElement.clientHeight || document.body.clientHeight;
    this.deviceH = h;
    console.log(this.nocInfo);
  },
  mounted() {
    this.gelitotal = this.nocInfo.data[0].itmes;
    this.ldzxtotal = this.nocInfo.data[1].itmes;
    this.ldfxtotal = this.nocInfo.data[2].itmes;
    let top10 = [];
    for (let i in this.nocInfo.data[4].itmes) {
      if (i <= 9) {
        top10.push(this.nocInfo.data[4].itmes[i]);
      }
    }
    this.UnitTypeEchartsData = top10;
    this.getlxyy();
    this.getcdyq();
    this.getmrjj();
  },
  components: {
    XPage,
    XSelect,
    XDangan
  },
  methods: {
    searchEvent() {
      this.pageNum = 1;
      this.showpeopleList(this.obj);
    },
    changedangan() {
      this.isShowCtx = 2;
    },
    currentChange(n) {
      console.log("分页");
      this.pageNum = n;
      this.showpeopleList();
    },
    showdetail() {
      this.pepleishow = !this.pepleishow;
      this.showpeopleList();
    },
    showPeopleDetail(index, item) {
      this.danganid = item.idNum;
      this.isShowCtx = 3;
    },
    async showpeopleList(obj) {
      var obj = {
        startTime: Array.isArray(this.obj.time) ? this.obj.time[0] : "",
        endTime: Array.isArray(this.obj.time) ? this.obj.time[1] : ""
      };
      if (this.obj.peopleUserID != "") {
        obj = Object.assign(obj, { idNum: this.obj.peopleUserID });
      }
      var data = Object.assign(
        {
          code: this.code,
          pageNum: this.pageNum,
          pageSize: this.pageSize
        },
        obj
      );

      const res = await getIsOlationsPage(data);
      console.log("**********");
      console.log(res);
      this.peoples = res.list;
      this.alltotal = res.total;
      this.allpage = Math.ceil(this.alltotal / this.pageSize);
    },
    //关闭
    closeMask() {
      this.$emit("closeMask");
    },

    getlxyy() {
      let data = [];
      let value = [];
      for (let i in this.nocInfo.data[3].itmes) {
        data.push(this.nocInfo.data[3].itmes[i].name);
        value.push(this.nocInfo.data[3].itmes[i].value);
      }
      let echarts = document.getElementById("main");
      let myChart = this.$echarts.init(echarts);
      myChart.setOption({
        //color: ['0e99ff', '0e99ff', '77dd07', 'fec940', 'fec940'],
        title: {
          text: "来锡缘由",
          x: "left",
          textStyle: {
            color: "#56FFFA"
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        grid: {},
        legend: {
          orient: "vertical",
          left: "60%",
          top:"15%",
          data: data,
          textStyle: {
            color: "#fff"
          }
        },
        color: ["#209cff", "#68e0cf", "#dea55c", "#c4ff0e", "#0ed145"],
        stillShowZeroSum: false,
        series: [
          {
            name: "",
            type: "pie",
            radius: ["40%", "60"],
            center: ["30%", "60%"],
            data: this.nocInfo.data[3].itmes,
            label: {
              show: false,
              // formatter:'问题数据量\n{c}',
              position: "center",
              lineHeight: 30
              // emphasis: {
              // 	show: true,
              // 	textStyle: {
              // 		fontSize: '30',
              // 		fontWeight: 'bold',
              // 	}
              // }
            },
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(128, 128, 128, 0.5)"
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            }
          }
        ]
      });
    },

    getcdyq() {
      // let data = [];
      // let value = [];
      // var length=this.nocInfo.data[5].itmes.length<20?this.nocInfo.data[5].itmes.length:20
      // for (var i = 0; i < length; i++) {
      //   data.push(this.nocInfo.data[5].itmes[i].name);
      //   value.push(this.nocInfo.data[5].itmes[i].value);
      // }
       let data = [];
      let mrvalue = [];
      let fxvalue = [];
      console.log(this.nocInfo.data[6].itmes[0]);
      for (let i in this.nocInfo.data[6].itmes[0].itmes) {
        data.push(this.nocInfo.data[6].itmes[0].itmes[i].name);
      }
      for (let i in this.nocInfo.data[6].itmes[0].itmes) {
        mrvalue.push(this.nocInfo.data[6].itmes[0].itmes[i].value);
      }
      for (let i in this.nocInfo.data[6].itmes[1].itmes) {
        fxvalue.push(this.nocInfo.data[6].itmes[1].itmes[i].value);
      }
      let echarts = document.getElementById("main2");
      let myChart = this.$echarts.init(echarts);
      // myChart.setOption({
      //   title: {
      //     text: "重点疫区人员分布统计",
      //     x: "left",
      //     textStyle: {
      //       color: "#56FFFA"
      //     }
      //   },
      //   tooltip: {
      //     trigger: "axis"
      //   },
      //   grid: {
      //     left: "5%"
      //   },
      //   color: ["#68e0cf"],
      //   xAxis: [
      //     {
      //       type: "category",
      //       data: data,
      //       axisLine: {
      //         lineStyle: {
      //           color: "#FFF"
      //         }
      //       },
      //       triggerEvent: true
      //     }
      //   ],
      //   yAxis: [
      //     {
      //       type: "value",
      //       axisLine: {
      //         lineStyle: {
      //           color: "#FFF"
      //         }
      //       },
      //       splitLine: {
      //         show: false,
      //         lineStyle: {
      //           color: ["#6c6c6c"],
      //           width: 1,
      //           type: "solid"
      //         }
      //       }
      //     }
      //   ],
      //   series: [
      //     {
      //       name: "数据总量",
      //       type: "bar",
      //       barWidth: 20,
      //       data: value
      //     }
      //   ]
      // });
        myChart.setOption({
        title: {
          text: "每日居家隔离人数 ",
          textStyle: {
            color: "#56FFFA"
          },
          top: "15%",
          left: "0"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        // legend: {
        //   data: ["每日居家隔离人数", "返锡人数变化"],
        //   color: ["#47e3ff", "#f7b500"],
        //   textStyle: {
        //     color: "#fff"
        //   },
        //   top: "18%",
        //   right: "10%"
        // },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: data.reverse(),
          axisLine: {
            lineStyle: {
              color: "#e5e5e5"
            }
          }
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#e5e5e5"
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ["#6c6c6c"],
              width: 1,
              type: "solid"
            }
          }
        },
        grid: {
          top: "30%",
          left: "10%"
        },
        series: [
          {
            name: "每日居家隔离人数",
            type: "line",
            data: mrvalue.reverse(),
            symbol: "none",
            smooth: true,
            areaStyle: {
              color: "#17495d"
            },
            lineStyle: {
              color: "#47e3ff"
            }
          },
          // {
          //   name: "返锡人数变化",
          //   type: "line",
          //   data: fxvalue.reverse(),
          //   symbol: "none",
          //   smooth: true,
          //   areaStyle: {
          //     color: "#526442"
          //   },
          //   lineStyle: {
          //     color: "#f7b500"
          //   }
          // }
        ]
      });
    },

    getmrjj() {
      let data = [];
      let mrvalue = [];
      let fxvalue = [];
      console.log(this.nocInfo.data[6].itmes[0]);
      for (let i in this.nocInfo.data[6].itmes[0].itmes) {
        data.push(this.nocInfo.data[6].itmes[0].itmes[i].name);
      }
      for (let i in this.nocInfo.data[6].itmes[0].itmes) {
        mrvalue.push(this.nocInfo.data[6].itmes[0].itmes[i].value);
      }
      for (let i in this.nocInfo.data[6].itmes[1].itmes) {
        fxvalue.push(this.nocInfo.data[6].itmes[1].itmes[i].value);
      }
      let echarts = document.getElementById("main3");
      let myChart = this.$echarts.init(echarts);
      myChart.setOption({
        title: {
          text: "返锡人数变化趋势图",
          textStyle: {
            color: "#56FFFA"
          },
          top: "15%",
          left: "0"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        // legend: {
        //   data: ["每日居家隔离人数", "返锡人数变化"],
        //   color: ["#47e3ff", "#f7b500"],
        //   textStyle: {
        //     color: "#fff"
        //   },
        //   top: "18%",
        //   right: "10%"
        // },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: data.reverse(),
          axisLine: {
            lineStyle: {
              color: "#e5e5e5"
            }
          }
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#e5e5e5"
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ["#6c6c6c"],
              width: 1,
              type: "solid"
            }
          }
        },
        grid: {
          top: "30%",
          left: "10%"
        },
        series: [
          // {
          //   name: "每日居家隔离人数",
          //   type: "line",
          //   data: mrvalue.reverse(),
          //   symbol: "none",
          //   smooth: true,
          //   areaStyle: {
          //     color: "#17495d"
          //   },
          //   lineStyle: {
          //     color: "#47e3ff"
          //   }
          // },
          {
            name: "返锡人数变化",
            type: "line",
            data: fxvalue.reverse(),
            symbol: "none",
            smooth: true,
            areaStyle: {
              color: "#526442"
            },
            lineStyle: {
              color: "#f7b500"
            }
          }
        ]
      });
    }
  }
};
</script>
<style lang="less">
.el-input__prefix {
  display: none;
}

.el-input__inner {
  height: 100% !important;
  width: 100%;
  background: transparent;
  padding: 0 !important;
  border: none;
}
</style>

<style lang="less" scoped>
.x-unit {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;

  .unit-ctx {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 1177px;
    height: 800px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    padding: 10px 30px;
    box-sizing: border-box;

    .ctx-title {
      width: 100%;
      padding-top: 35px;
      box-sizing: border-box;
      font-family: PingFangSC-Medium;
      font-size: 24px;
      color: #e9e9e9;
      letter-spacing: 4.8px;
      text-align: center;
      box-sizing: border-box;
    }

    .top_left {
      text-align: left;
      margin-top: 10px;
      margin-left: 20px;
      overflow: hidden;
      width: 815px;

      .top_left_one {
        overflow: hidden;
        float: left;
        margin-top: 22px;

        img {
          float: left;
          margin-top: 13px;
        }

        div {
          float: left;
          margin-top: -6px;
          margin-left: 12px;

          p {
            font-size: 22px;
            color: #69f1f7;
          }

          .num {
            font-size: 18px;
            margin-top: -12px;
          }
        }
      }

      .top_left_two {
        float: left;
        margin-left: 60px;

        .item {
          overflow: hidden;

          img {
            float: left;
          }

          div {
            float: left;
            margin-top: -9px;
            margin-left: 15px;

            p {
              font-size: 22px;
              color: #69f1f7;

              span {
                color: #ec7d2a;
              }
            }

            .num {
              font-size: 18px;
              margin-top: -12px;
            }
          }
        }
      }

      .top_left_three {
        float: left;
        margin-left: 52px;
      }
    }

    .top_right {
      float: right;
      width: 250px;
      margin-top: -179px;
      margin-right: 14px;

      .type-title {
        color: #56FFFA;
        font-size: 18px;
        font-weight: bold;
        text-align: left;
      }

      .type-list {
        width: 100%;
        padding: 0;
        margin-top: 9px;
        list-style: none;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        box-sizing: border-box;

        .type-list-rs {
          width: 100%;
          list-style: none;
          margin-bottom: 20px;

          .rs-name {
            width: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #e5e5e5;
            margin-bottom: 5px;

            .name {
              flex: 1;
              text-align: left;
            }

            .number {
              flex: 1;
              text-align: right;
            }
          }

          .rs-process {
            width: 100%;
            height: 6px;
            border-radius: 4px;
            background: #333333;

            .process {
              transition: width 0.3s ease-in-out;
              height: 100%;
              border-radius: 4px;
              background-image: linear-gradient(
                270deg,
                #68e0cf 0%,
                #209cff 100%
              );
            }
          }
        }
      }
    }

    .middle {
      float: left;
    }
    .bottom {
      margin-top: 236px;
    }
  }
}
.x-house {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;

  .text-left.page2 {
    text-align: left;
  }

  .page2 {
    .unit-list {
      .list-li:nth-child(even) {
        background-color: #06121d;
      }
    }

    .back {
      float: right;
      position: absolute;
      right: 60px;
      width: 0px;
      top: 30px;
      cursor: pointer;
      img {
        width: 30px;
        height: 30px;
      }
    }

    .tabbar {
      padding: 0;
      margin: 0;
      list-style: none;
      text-align: left;
      text-align: left;
      margin-top: 20px;

      .tabbarContent {
        & > li,
        & > ul {
          padding: 0;
          margin: 0;
          list-style: none;
          color: #fff;
        }

        li {
          width: 33%;
          display: inline-block;
          padding-top: 10px;
          padding-bottom: 10px;

          span {
            width: 40%;
            display: inline-block;
          }
        }
      }

      & > li {
        display: inline-block;
        padding: 5px;
        border-radius: 4px;
        background: #0f0f2b;
        font-size: 16px;
        color: #fff;
      }

      .list-li:nth-child(even) {
        background-color: #06121d;
      }
    }

    .tabbar .active {
      background: #3f8aff;
      color: #fff;
    }

    .name {
      width: 100%;
      text-align: left;
      font-family: PingFangSC-Medium;
      font-size: 18px;
      color: #69d3da;
      letter-spacing: 0;
      overflow: hidden;
      white-space: nowrap;
      word-break: normal;
      text-overflow: ellipsis;
      margin-top: 20px;

      & > span {
        line-height: 2;
      }
    }

    .choose {
      float: right;
      padding: 0;
      margin: 0;
      position: relative;
      top: 0;
    }

    .choose ul,
    .choose li {
      list-style: none;
      display: inline-block;
    }

    .choose li {
      padding: 8px;
      border-radius: 4px;
      background: #0f0f2b;
      cursor: pointer;
    }

    .choose .active {
      background: #3f8aff;
      color: #fff;
    }

    .car-li {
      flex-wrap: wrap;

      .carDetail {
        display: flex;
        align-items: center;
        flex-grow: 1;
        width: 100% !important;

        & > div {
          width: 20%;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      & > div {
        width: 20% !important;
      }
    }

    .list-li {
      cursor: pointer;
      width: 100%;
      height: 50px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #ffffff;
      line-height: 36px;

      & > div {
        font-family: PingFangSC-Semibold;
        font-size: 16px;
        color: #ffffff;
        text-align: center;
        line-height: 22px;
        width: 100%;
      }

      & > .button-color {
        color: #3f8aff;
      }
    }
  }

  .house-ctx::-webkit-scrollbar {
    width: 0px;
    height: 16px;
    background-color: #ccc;
  }

  .house-ctx {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 1177px;
    height: 800px;
    overflow-y: auto;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    padding: 10px 30px;
    box-sizing: border-box;

    .ctx-title {
      width: 100%;
      padding-top: 10px;
      box-sizing: border-box;
      font-family: PingFangSC-Medium;
      font-size: 24px;
      color: #e9e9e9;
      letter-spacing: 4.8px;
      text-align: center;
      box-sizing: border-box;
    }

    .ctx-info {
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 28px;

      .info-item {
        flex: 1;
        height: 180px;

        .item-rs {
          width: 100%;
          height: 50%;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .rs-content {
            width: 50%;
            height: 100%;

            .content-name {
              width: 100%;
              font-family: PingFangSC-Medium;
              font-size: 18px;
              color: #69d3da;
              letter-spacing: 0;
              text-align: left;

              .iconfont {
                font-size: 22px;
                margin-right: 8px;
              }
            }

            .content-number {
              font-family: Silom;
              font-size: 40px;
              margin-top: 18px;
              text-align: left;
              color: #d0b01c;
              letter-spacing: 2.22px;
              line-height: 40px;

              .unit {
                font-family: PingFangSC-Medium;
                font-size: 18px;
                color: #69d3da;
                letter-spacing: 0;
              }
            }
          }
        }

        .item-name {
          width: 100%;
          font-family: PingFangSC-Medium;
          font-size: 18px;
          color: #69d3da;
          letter-spacing: 0;
          text-align: left;

          .iconfont {
            font-size: 22px;
            margin-right: 8px;
          }
        }

        .item-number {
          margin-top: 20px;
          font-family: Silom;
          font-size: 40px;
          color: #d0b01c;
          letter-spacing: 2.22px;
          text-align: left;
        }

        .item-pie {
          width: 100%;
          height: 140px;
          margin-top: 10px;
          padding: 5px 0px;
          box-sizing: border-box;

          .pie-canvas {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .ctx-footer {
      width: 100%;
      margin-top: 30px;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .footer-floor::-webkit-scrollbar {
        width: 0px;
        height: 16px;
        background-color: #ccc;
      }

      .footer-floor {
        flex: 1;
        height: 445px;
        overflow-y: auto;

        .floor-name {
          width: 100%;
          text-align: left;
          font-family: PingFangSC-Medium;
          font-size: 18px;
          color: #69d3da;
          letter-spacing: 0;
          overflow: hidden;
          white-space: nowrap;
          word-break: normal;
          text-overflow: ellipsis;
        }

        .floor-list {
          width: 100%;
          height: clac(100% - 25px);
          overflow-y: auto;
          margin-top: 20px;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .list-name {
            width: 55px;
            text-align: left;
            font-family: PingFangSC-Regular;
            font-size: 16px;
            color: #e9e9e9;
            min-width: 55px;
          }

          .kongzhi {
            background-color: #474747;
          }

          .qunzu {
            background-color: #ca504b;
          }

          .zizhu {
            background-color: #336298;
          }

          .chuzu {
            background-color: #c1812d;
          }

          .list-rs {
            //width: calc(100% - 55px);
            cursor: pointer;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-direction: column;
            margin: 10px;
            margin-top: 0;
            margin-bottom: 0;

            .rs-item {
              width: 60px;
              height: 25px;
              text-align: center;
              line-height: 25px;
              font-family: PingFangSC-Regular;
              font-size: 16px;
              color: #e9e9e9;
              text-align: center;
              cursor: pointer;

              &.item-empty {
                background: #474747;
              }

              &.item-self {
                background: #21629c;
              }

              &.item-rent {
                background: #cc7f01;
              }

              &.item-other {
                background: #da4545;
              }
            }
          }
        }
      }

      .footer-unit::-webkit-scrollbar {
        width: 0px;
        height: 16px;
        background-color: #ccc;
      }

      .footer-unit {
        flex: 1;
        height: 450px;
        overflow-y: auto;

        .unit-header {
          width: 100%;
          display: flex;
          justify-content: flex-end;
          align-items: center;

          .header-btn {
            width: 60px;
            height: 32px;
            background: #102c45;
            margin-right: 3px;
            line-height: 32px;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #ffffff;
            letter-spacing: 0;
            text-align: center;

            &:first-child {
              border-top-left-radius: 4px;
              border-bottom-left-radius: 4px;
            }

            &:last-child {
              border-top-right-radius: 4px;
              border-bottom-right-radius: 4px;
              margin-right: 0;
            }

            &.active {
              background: #209cff;
            }
          }
        }

        .unit-list {
          width: 100%;
          height: clac(100% - 25px);

          margin-top: 30px;

          .list-title {
            font-family: PingFangSC-Semibold;
            font-size: 16px;
            color: #ffffff;
            text-align: center;
            line-height: 22px;
          }

          .list-ul {
            width: 90%;
            height: clac(100% - 25px);
            margin-top: 15px;
            overflow-y: auto;
            list-style: none;

            .list-li:nth-child(even) {
              background-color: #06121d;
            }

            .list-li {
              cursor: pointer;
              width: 100%;
              height: 36px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-family: PingFangSC-Regular;
              font-size: 14px;
              color: #ffffff;
              line-height: 36px;

              .item-no {
                width: 30%;

                box-sizing: border-box;
              }

              .li-name {
                width: 50%;

                box-sizing: border-box;
              }

              .li-sex {
                width: 40%;

                box-sizing: border-box;
              }

              .li-age {
                width: 40%;

                box-sizing: border-box;
              }

              .li-phone {
                box-sizing: border-box;
                width: 100%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
          }
        }
      }
    }
  }
}
.table-footer {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
}

.input {
  font-size: 14px;
  color: #fff;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
}

.header-item {
  width: 186px;
  height: 100%;
  border: none;
  outline: none;
  background: #06121d;
  border: 1px solid rgba(62, 178, 215, 0);
  border-radius: 4px;
  font-size: 14px;
  color: #fff;
  padding: 0 14px;
  box-sizing: border-box;
}

.header-btn {
  width: 66px;
  height: 100%;
  background: #72edf5;
  border-radius: 4px;
  text-align: center;
  line-height: 36px;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #000000;
  cursor: pointer;
}
</style>

<style>
.dateselect .el-input__inner {
  background: #06121d;
}
	.dateselect{
      border:1px solid grey !important;
    }
.el-date-editor .el-range-input {
  background: #06121d;
}
</style>
